<template>
	<view class="recruitment">
		<view class="card">
			<view class="flex oneInput">
				<text style="color: #41644A;">*</text>
				<view class="title">姓名</view><input v-model="name" placeholder="请输入姓名"
					placeholder-style="color:#999999;font-size: 28rpx;" />
			</view>
			<view class="flex oneInput">
				<text style="color: #41644A;">*</text>
				<view class="title">手机号</view> <input type="number" v-model="phone" placeholder="请输入手机号"
					placeholder-style="color:#999999;font-size: 28rpx;" />
			</view>
			<view class="flex oneInput" style="position: relative; ">
				<text style="color: #41644A;">*</text>
				<view class="title">经营类型</view>
				<picker
					mode="selector"
					:range="array"
					range-key="name"
					:value="index"
					@change="bindPickerChange">
					<view style="font-size: 28rpx;color: #999999;width: 400rpx;">
						{{ typeName }}
					</view>
				</picker>
				<image class="downIcon" src="https://wx.2024csnl.com/static/mine/down.png"></image>
			</view>
			<view class="flex oneInput" style="position: relative; ">
				<text style="color: #41644A;">*</text>
				<view class="title">店铺类型</view>
				<picker
					mode="selector"
					:range="merTypeArray"
					range-key="name"
					:value="index"
					@change="bindMerTypePickerChange">
					<view style="font-size: 28rpx;color: #999999;width: 400rpx;">
						{{ merTypeName }}
					</view>
				</picker>
				<image class="downIcon" src="https://wx.2024csnl.com/static/mine/down.png"></image>
			</view>
			<view class="flex oneInput">
				<text style="color: #41644A;">*</text>
				<view class="title">店铺名称</view><input v-model="shopName" placeholder="请输入店铺名称"
					placeholder-style="color:#999999;font-size: 28rpx;" maxlength="15" />
			</view>
			<view class="flex oneInput" style="position: relative;" @click="handleChooseLoaction">
				<text style="color: #41644A;">*</text>
				<view class="title">地理位置</view> <input v-model="address" placeholder="请选择地理位置" :disabled="true"
					placeholder-style="color:#999999;font-size: 28rpx;" />
				<image class="downIcon" src="https://wx.2024csnl.com/static/mine/down.png"></image>
			</view>
			<view class="flex oneInput">
				<text style="color: #41644A;">*</text>
				<view class="title">店铺说明</view> <input v-model="explain" placeholder="请填写店铺说明"
					placeholder-style="color:#999999;font-size: 28rpx;" />
			</view>
		</view>
		
		<view class="card">

			<view v-if="false" class="licenseBox">
				<view class="flex">
					<text style="color: #41644A;">*</text>
					<view>门头照</view>
				</view>
				<view class="hint">请保证图像清晰、光线均匀</view>
				<view class="upTwoImageBox">
					<image v-if="storefrontOneImg" :src="storefrontOneImg" @click="chooseFile('storefrontOneImg')">
					</image>
					<image v-else src="https://wx.2024csnl.com/static/mine/upTwo.png"
						@click="chooseFile('storefrontOneImg')"></image>
					<image v-if="storefrontTwoImg" :src="storefrontTwoImg" @click="chooseFile('storefrontTwoImg')">
					</image>
					<image v-else src="https://wx.2024csnl.com/static/mine/upTwo.png"
						@click="chooseFile('storefrontTwoImg')"></image>
				</view>
			</view>
			<view class="licenseBox">
				<view class="flex">
					<text style="color: #41644A;">*</text>
					<view>店铺头像</view>
				</view>

				<view class="hint">请保证图像清晰、光线均匀</view>
				<view class="upTwoImageBox">
					<image v-if="logoImg" :src="logoImg" @click="chooseFile('logoImg')"></image>
					<image v-else @click="chooseFile('logoImg')"
						src="https://wx.2024csnl.com/static/mine/upLogo.png"></image>
				</view>
			</view>
		</view>
		
		<view class="card">
			<view class="licenseBox">
				<view class="flex">
					<text style="color: #41644A;">*</text>
					<view>营业执照</view>
				</view>
				<view class="hint">请保证证件边框完整、图像清晰、光线均匀</view>
				<image
					v-if="bussauthimg"
					class="upOne"
					:src="bussauthimg"
					@click="chooseFile('bussauthimg')"></image>
				<image
					v-else
					class="upOne"
					src="https://wx.2024csnl.com/static/mine/upOne.png"
					@click="chooseFile('bussauthimg')">
				</image>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>统一社会信用代码</text>
				</view>
				<view class="minorText">
					<input
						v-model="bussauthnum"
						placeholder="上传营业执照自动识别"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="32" />
				</view>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>营业执照名称</text>
				</view>
				<view class="minorText">
					<input
						v-model="bussauthname"
						placeholder="上传营业执照自动识别"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="32" />
				</view>
			</view>
			
			<!-- <view class="between oneInput">
				<view class="licenseTit">统一社会信用代码</view>
				<view class="minorText">{{shopMsg.uuscc?shopMsg.uuscc:'上传营业执照自动识别'}}</view>
			</view> -->
			<!-- <view class="between oneInput">
				<view class="licenseTit">营业执照名称</view>
				<view class="minorText">{{shopMsg.host_name?shopMsg.host_name:'上传营业执照自动识别'}}</view>
			</view> -->
		</view>
		
		<view class="card">
			<view class="licenseBox">
				<view class="flex">
					<text style="color: #41644A;">*</text>
					<view>法人身份证头像面</view>
				</view>
				<view class="hint">请保证证件边框完整、图像清晰、光线均匀</view>
				<image
					v-if="certimgpositive"
					class="upOne"
					:src="certimgpositive"
					@click="chooseFile('certimgpositive')"></image>
				<image
					v-else
					class="upOne"
					src="https://img.2024csnl.com/static/2.x/upload.png"
					@click="chooseFile('certimgpositive')">
				</image>
			</view>
			<view class="licenseBox">
				<view class="flex">
					<text style="color: #41644A;">*</text>
					<view>法人身份证国徽面</view>
				</view>
				<view class="hint">请保证证件边框完整、图像清晰、光线均匀</view>
				<image
					v-if="certimgnegative"
					class="upOne"
					:src="certimgnegative"
					@click="chooseFile('certimgnegative')"></image>
				<image
					v-else
					class="upOne"
					src="https://img.2024csnl.com/static/2.x/upload.png"
					@click="chooseFile('certimgnegative')">
				</image>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>法人身份证姓名</text>
				</view>
				<view class="minorText">
					<input
						v-model="certname"
						placeholder="请输入姓名"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="15" />
				</view>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>法人身份证号码</text>
				</view>
				<view class="minorText">
					<input
						v-model="certcardno"
						placeholder="请输入身份证号码"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="18" />
				</view>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>法人手机号码</text>
				</view>
				<view class="minorText">
					<input
						v-model="cardmobile"
						placeholder="请输入手机号码"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="11" />
				</view>
			</view>
		</view>
		
		<view class="card">
			<view class="licenseBox">
				<view class="flex">
					<text style="color: #41644A;">*</text>
					<view>银行卡正面照片</view>
				</view>
				<view class="hint">请保证证件边框完整、图像清晰、光线均匀</view>
				<image
					v-if="bankimg"
					class="upOne"
					:src="bankimg"
					@click="chooseFile('bankimg')"></image>
				<image
					v-else
					class="upOne"
					src="https://img.2024csnl.com/static/2.x/upload.png"
					@click="chooseFile('bankimg')">
				</image>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>银行卡持卡人姓名</text>
				</view>
				<view class="minorText">
					<input
						v-model="bankcarduser"
						placeholder="请输入姓名"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="15" />
				</view>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>银行卡号</text>
				</view>
				<view class="minorText">
					<input
						v-model="bankcardnum"
						placeholder="请输入银行卡号"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="32" />
				</view>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>银行名称</text>
				</view>
				<view class="minorText">
					<input
						v-model="bankname"
						placeholder="请输入银行名称"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="11" />
				</view>
			</view>
			<view class="between oneInput">
				<view class="licenseTit">
					<text style="color: #41644A;">*</text>
					<text>银行支行名称</text>
				</view>
				<view class="minorText">
					<input
						v-model="openbank"
						placeholder="如X银行X市分行X支行"
						placeholder-style="color:#999999;font-size: 28rpx; text-align: right;"
						maxlength="32" />
				</view>
			</view>
		</view>

		<view class="card">
			<view class="agreement">提交则同意<text
					@click="onSkip('/package/mine/agreement?pageType=商户入驻申请协议')">《商户入驻申请协议》</text></view>
			<view class="submitBtn flex" @click="onSubmit()">提交申请</view>
		</view>



	</view>
</template>

<script>
	import {
		$post,
		getBusinessType,
		setBusinessLicense
	} from "../../../api/index.js"
	import addressPicker from "../../../components/k-region/addressPicker.vue"
	import md5 from "../../../utils/md5.js";
	export default {
		components: {
			addressPicker
		},
		data() {
			return {
				shopName: '', //店铺名称
				typeName: '请选择经营类型',
				index: 0,
				array: [], //经营类型list
				manageList: [], //经营类型
				merTypeArray: [{name: '企业商户', id: 3},{name: '小微商户', id: 2},{name: '个体户商户', id: 1}],
				merTypeName: '企业商户',
				merType: 3,
				manageId: '', //选择的经营类型id
				name: '',
				phone: '',
				address: '', //地理位置
				explain: '', //店铺说明
				// city: '',
				latitude: '',
				longitude: '',
				// bussauthimg: '', //营业执照
				storefrontOneImg: '', //门头1
				storefrontTwoImg: '', //门头2
				logoImg: '', //店铺头像
				shopMsg: {}, //店铺数据
				isAgency: getApp().globalData.isAgency,
				// 新增数据
				bussauthimg: '', // 营业执照照片
				bussauthnum: '', // 统一社会信用代码
				bussauthname: '', // 营业执照名称
				
				certimgpositive: '', // 法人身份证头像面
				certimgnegative: '', // 法人身份证国徽面
				certname: '', // 法人身份证姓名
				certcardno: '', // 法人身份证号码
				cardmobile: '', // 法人手机号码
				
				bankimg: '', // 银行卡正面照片
				bankcarduser: '', // 银行卡持卡人姓名
				bankcardnum: '', // 银行卡号
				bankname: '', // 银行名称
				openbank: '' // 银行支行名称【如XX银行XX市分行XX支行】
			}
		},
		created() {
			this.onGetBusinessType()
		},
		methods: {
			bindPickerChange(e) {
				
				this.typeName = this.array[e.detail.value].name
				this.manageId = this.manageList[e.detail.value].id
				// console.log('picker发送选择改变，携带值为', this.manageId)
			},
			bindMerTypePickerChange(e) {
				
				this.merTypeName = this.merTypeArray[e.detail.value].name
				this.merType = this.merTypeArray[e.detail.value].id
				// console.log('picker发送选择改变，携带值为', this.manageId)
			},
			// 提交数据
			async submit() {
				const {
					// 新增
					bussauthimg,
					bussauthnum,
					bussauthname,
					certimgpositive,
					certimgnegative,
					certname,
					certcardno,
					cardmobile,
					bankimg,
					bankcarduser,
					bankcardnum,
					bankname,
					openbank
				} = this;
				const msg = {
					levelid: 3,
					cid: this.manageId,
					form0: this.name,
					form1: this.phone,
					content: this.explain,
					mer_type:this.merType,
					address: this.address,
					longitude: this.longitude,
					latitude: this.latitude,
					pics: `${this.storefrontOneImg},${this.storefrontTwoImg}`,
					logo: this.logoImg,
					name: this.shopName,
					zhengming: bussauthimg,
					host_name: bussauthname,
					uuscc: bussauthnum,
					host: '',
					// 邀请码
					activation_code: '',
					// 新增
					bussauthimg,
					bussauthnum,
					bussauthname,
					certimgpositive,
					certimgnegative,
					certname,
					certcardno,
					cardmobile,
					bankimg,
					bankcarduser,
					bankcardnum,
					bankname,
					openbank
				}
				let url = encodeURIComponent(JSON.stringify(msg))
				this.onSkip(`/package/mine/enterPay?msg=${url}`)
				console.log(msg, "msg")
			},
			checkUFrom () {
				return new Promise((resolve, reject) => {
					let error = '';
					if (this.name == '') {
						error = '请输入姓名';
					} else if (this.phone == '') {
						error = '请输入手机号码';
					} else if (this.manageId == '') {
						error = '请选择经营类型';
					} else if (this.merType == '') {
						error = '请选择店铺类型';
					} else if (this.shopName == '') {
						error = '请输入店铺名称';
					} else if (this.address == '') {
						error = '请在地图上定位店铺地址';
					} else if (this.explain == '') {
						error = '请输入店铺说明';
					} else if (this.logoImg == '') {
						error = '请上传店铺头像';
					} else if (this.bussauthimg == '') {
						error = '请上传营业执照照片';
					} else if (this.bussauthnum == '') {
						error = '无法识别统一社会信用代码';
					} else if (this.bussauthname == '') {
						error = '无法识别营业执照名称';
					} else if (this.certimgpositive == '') {
						error = '请上传法人身份证头像面';
					} else if (this.certimgnegative == '') {
						error = '请上传法人身份证国徽面';
					} else if (this.certname == '') {
						error = '请输入法人身份证姓名';
					} else if (this.certcardno == '') {
						error = '请输入法人身份证号码';
					} else if (this.cardmobile == '') {
						error = '请输入法人手机号码';
					} else if (this.bankimg == '') {
						error = '请上传银行卡号';
					} else if (this.bankcarduser == '') {
						error = '请输入银行卡持卡人姓名';
					} else if (this.bankcardnum == '') {
						error = '请输入银行卡号';
					} else if (this.bankname == '') {
						error = '请输入银行名称';
					} else if (this.openbank == '') {
						error = '请输入银行支行名称';
					}
					if (error) reject(new Error(error))
					resolve()
				})
			},
			postApplyForm () {
				return new Promise(async (resolve, reject) => {
					const {
						// 旧表
						name,
						phone,
						manageId,
						merType,
						shopName,
						address,
						latitude,
						longitude,
						explain,
						logoImg,
						// 新增
						bussauthimg,
						bussauthnum,
						bussauthname,
						certimgpositive,
						certimgnegative,
						certname,
						certcardno,
						cardmobile,
						bankimg,
						bankcarduser,
						bankcardnum,
						bankname,
						openbank
					} = this
					const res = await $post('s=/ApiBusiness/apply', {
						// 旧表
						levelid: 3,
						form0: name,
						form1: phone,
						cid: manageId,
						mer_type: merType,
						name: shopName,
						address,
						longitude,
						latitude,
						content: explain,
						logo: logoImg,
						// 废弃
						host: '',
						pics: '',
						zhengming: '',
						host_name: '',
						uuscc: '',
						activation_code: '',
						// 新增
						bussauthimg,
						bussauthnum,
						bussauthname,
						certimgpositive,
						certimgnegative,
						certname,
						certcardno,
						cardmobile,
						bankimg,
						bankcarduser,
						bankcardnum,
						bankname,
						openbank
					})
					const { data, msg, status } = res.data
					if (status == 1) {
						uni.showToast({
							title: '企业资质信息已提交'
						})
					} else {
						reject(new Error(msg))
					}
				})
			},
			// 触发提交表单
			async onSubmit() {
				try {
					await this.checkUFrom()
					// 不提交新接口
					// await this.postApplyForm()
					const {
						name,
						phone,
						explain,
						address,
						typeName,
						shopName,
						// city,
						bussauthimg,
						storefrontOneImg,
						storefrontTwoImg,
						logoImg
					} = this
					switch (true) {
						case name == '':
							this.showToast('姓名不能为空')
							break;
						case !/^1[3456789]\d{9}$/.test(phone):
							this.showToast('请输入正确手机号码')
							break;
						case typeName == '' || typeName == '请选择经营类型':
							this.showToast('请选择经营类型')
							break;
						case shopName == '':
							this.showToast('店铺名称不能为空')
							break;
						case address == '':
							this.showToast('请选择地理位置')
							break;
						case explain == '':
							this.showToast('请填写店铺说明')
							break;
						case logoImg == '':
							this.showToast('请上传店铺头像')
							break;
						default:
							this.submit()
					}
				} catch (e){
					uni.showToast({
						icon: 'error',
						title: e.message
					})
				}
				
			},
			// 选择地址
			handleChooseLoaction(type) {
				uni.chooseLocation({
					success: (res) => {
						const {
							longitude,
							address,
							latitude,
							name
						} = res
						this.address = address
						this.longitude = longitude
						this.latitude = latitude
					},
					fail: (err) => {
						console.log(err);
					},
				});
			},

			//上传图片
			async chooseFile(type) {
				if (type == 'bussauthimg') {
					this.shopMsg = {}
				}
				uni.chooseImage({
					count: 1,
					// sourceType: ['album'],
					success: (res) => {
						console.log(res, "----11")
						this[type] = ''
						uni.showLoading({
							title: '上传中...'
						})
						this.upImg(res.tempFilePaths[0], type)
					}
				});
			},
			upImg(path, type) {
				let BASE_URL = getApp().globalData.BASE_URL
				let platform = 'app'
				// #ifdef H5
				if (this.isAgency) {
					platform = 'h5'
					BASE_URL = '/api'
				}

				// #endif
				uni.uploadFile({
					url: `${BASE_URL}?s=/ApiImageupload/uploadImg&aid=1&platform=${platform} `,
					filePath: path,
					name: 'file',
					// #ifndef H5
					header: {
						'content-type': 'multipart/form-data'
					},
					// #endif
					success: (res) => {
						console.log(res, "上传成功")
						const data = JSON.parse(res.data);
						// console.log(data, "data")
						const {
							msg,
							status,
							url
						} = data
						if (status == 1) {
							this[type] = url
							if (type == 'bussauthimg' || type == 'certimgpositive' || type == 'bankimg') {
								// this.onSetBusinessLicense(url)
								this.autoSetInput(type, url)
							}
						}
						uni.hideLoading();
					}
				});
			},
			// orc
			async autoSetInput (type, url) {
				const types = {
					'certimgpositive': 1,
					'bankimg': 2,
					'bussauthimg': 3
				}
				const res = await $post('s=/ApiUpload/get_ocr_info', {
					img_url: url,
					type: types[type]
				})
				const { status, data_info, msg } = res.data
				if (status == 1) {
					console.log('orc ==> ', data_info)
					if (type == 'bussauthimg') {
						this.bussauthnum = data_info.creditCode
						this.bussauthname = data_info.name
					} else if (type == 'certimgpositive') {
						this.certname = data_info.name
						this.certcardno = data_info.number
					} else if (type == 'bankimg') {
						this.bankcardnum = data_info.cardNo
						this.bankname = data_info.bankName
					}
				} else {
					this.showToast(msg)
				}
			},
			// [废弃]营业执照信息
			async onSetBusinessLicense(url) {
				const res = await setBusinessLicense('s=/ApiZwyRequest/uuscccheck', {
					path: url
				})
				const { status, data, msg } = res.data
				if (status == 1) {
					this.shopMsg = data
					console.log(this.shopMsg.host)
					this.bussauthnum = data.uuscc
					this.bussauthname = data.host_name
				} else {
					this.showToast(msg)
				}
			},

			// 获取商家类型
			async onGetBusinessType() {
				const res = await getBusinessType('s=/ApiIndex/businesstypes')
				const {
					data,
					msg,
					status
				} = res.data
				console.log(res, "**")
				if (status == 1) {
					this.array = data.map(item => {
						return {
							name: item.name
						}
					})
					console.log(this.array, 'this.array ')
					this.manageList = data
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.license {
		margin-left: 20%;
		width: 290rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.agreement {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		margin: 52rpx 0 30rpx;

		text {
			color: #0084FF;
			margin-left: 10rpx;
		}
	}

	.upTwoImageBox {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0 26rpx;

		image {
			width: 100%;
			height: 218rpx;
		}
	}

	.licenseTit {
		color: #666;
		font-size: 28rpx;
	}

	.minorText {
		color: #C8C8C8;
		font-size: 28rpx;
	}

	.licenseBox {
		padding: 30rpx;
		font-size: 28rpx;

		.hint {
			font-size: 24rpx;
			color: #C8C8C8;
			margin: 29rpx 0 46rpx 0;
		}

		.upOne {
			height: 340rpx;
			width: 100%;
		}

	}

	.downIcon {
		right: 60rpx;
		position: absolute;
		width: 34rpx;
		height: 15rpx;
	}

	.card {
	}

	.recruitment {
	}

	.addressBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 65%;

	}



	.submitBtn {
		margin: 50rpx 30rpx;
		color: #fff;
		font-size: 32rpx;
		background: #41644A;
		border-radius: 90rpx;
		padding: 20rpx 0;
		justify-content: center;
	}

	.textareaBox {
		position: relative;
	}

	.textNum {
		position: absolute;
		bottom: 20rpx;
		text-align: end;
		width: 95%;
	}


	.oneInput {
		margin-bottom: 30rpx;
		font-size: 28rpx;
		padding: 30rpx 41rpx;
		border-bottom: 1px solid #f7f7f7;
		border-radius: 10rpx;
		align-items: center;

		.title {
			width: 30%;
		}

	}
</style>